<template>
  <div class="assign-container">
    <div class="scroll-box">
      <div class="assign-name-box">
        <p class="name-text">{{device_name}}</p>
        <div class="id-text-box">
          <p class="decive-code">设备编号：{{device_number}} </p>
          <p>工单编号：{{order_no}}</p>
        </div>
        <p class="border-box"></p>
      </div>
      <div>
        <div class="add-name-box">
          <span class="app-form-red">*</span>
          <span class="add-name-text">工程师</span>
        </div>
        <van-field
          readonly
          v-model="engineerName"
          placeholder="请选择"
          right-icon="arrow"
          :error-message="engineerNameError"
          @click="onOpenVar"
        />
      </div>
      <div class="add-name-box">
        <div>
          <span class="add-name-text">抄送通知</span>
        </div>
        <div
          class="var-item"
          v-for="(item, index) in chooseVarDataMany"
          :key="index"
        >
          <span>{{item.username}}</span>
          <van-icon
            name="cross"
            @click="deleteVarDataMany(index)"
          />
        </div>

        <van-button
          plain
          type="info"
          size="small"
          @click="onOpenVarMany"
        >选择抄送人员</van-button>
      </div>
    </div>

    <div class="button-margin">
      <van-button
        block
        type="info"
        @click="onSumbit"
      >确 定</van-button>
    </div>

    <!-- 选择工程师 -->
    <van-popup
      v-model="showVarBox"
      position="bottom"
      :close-on-click-overlay="false"
      :style="{ height: '64%' }"
    >
      <div class="var-box">
        <div class="var-box-header">
          <span class="model-name">{{ deviceModelName || '' }}</span>
          <!-- <p class="model-choose">已选择（<span class="color-primary">{{ chooseVarData.length }}</span>/5）</p> -->
        </div>
        <div class="var-search-box">
          <form action="/">
            <van-search
              v-model="searchKey"
              shape="round"
              placeholder="搜索姓名"
              clearable
              @search="handleSearch"
              @clear="handleClear"
            />
          </form>
        </div>
        <ul class="var-list scroll-box">
          <li
            v-for="(item, index) in filterVarList"
            :key="item.id"
            :class="{'color-primary': item.checked}"
            @click="selectVar(item, index)"
          >
            <span>{{ item.name}}</span>
            <van-icon
              name="success"
              v-if="item.checked"
            />
          </li>
        </ul>
        <ul class="operate-box">
          <li @click="cancelSelect">取消</li>
          <li
            class="color-primary"
            @click="confirmSelect"
          >确定</li>
        </ul>
      </div>
    </van-popup>
    <!-- 选择抄送人员 -->
    <van-popup
      v-model="showVarBoxMany"
      position="bottom"
      :close-on-click-overlay="false"
      :style="{ height: '64%' }"
    >
      <div class="var-box">
        <div class="var-box-header">
          <span class="model-name">{{ deviceModelNameMany || '' }}</span>
          <p class="model-choose">已选择（<span class="color-primary">{{ chooseVarDataMany.length }}</span>/{{filterVarListMany.length}}）</p>
        </div>
        <div class="var-search-box">
          <form action="/">
            <van-search
              v-model="searchKeyMany"
              shape="round"
              placeholder="搜索姓名"
              clearable
              @search="handleSearchMany"
              @clear="handleClearMany"
            />
          </form>
        </div>
        <ul class="var-list scroll-box">
          <li
            v-for="(item, index) in filterVarListMany"
            :key="item.id"
            :class="{'color-primary': item.checked}"
            @click="selectVarMany(item, index)"
          >
            <span>{{ item.username}}</span>
            <van-icon
              name="success"
              v-if="item.checked"
            />
          </li>
        </ul>
        <ul class="operate-box">
          <li @click="cancelSelectMany">取消</li>
          <li
            class="color-primary"
            @click="confirmSelectMany"
          >确定</li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getOrderList, dispatchOrder, getSystemUserList, getEngineerList } from '@/api/maintenanceEngineer';
import { Form, ActionSheet, Cell, CellGroup, Field, Button, Switch, Uploader, Popup, Search, Toast } from 'vant';
export default {
  components: {
    [Form.name]: Form, //表单
    [ActionSheet.name]: ActionSheet, //动作面板
    [Field.name]: Field, //输入框
    [Button.name]: Button, //按钮
    [Popup.name]: Popup, //弹窗
    [Search.name]: Search,
    [Toast.name]: Toast
  },
  data() {
    return {
      listData: '',
      device_name: '',
      device_number: '',
      order_no: '',
      engineerName: '',
      engineerNameError: '',
      showVarBox: false, //打开选择弹窗
      searchKey: '', //选择框搜索
      varTotal: 0, //总数
      varList: [], //全部数据
      filterVarList: [],
      deviceModelName: '选择工程师', //选择框搜索标题
      chooseVarData: [], //单选选中
      openBefore: [], //打开选择框之前选中的值

      showVarBoxMany: false, //打开多选择弹窗
      searchKeyMany: '', //多选择框搜索
      varTotalMany: 0, //多选择框总数
      varListMany: [], //多选择框全部数据
      filterVarListMany: [],
      deviceModelNameMany: '选择抄送人员', //选择框搜索标题
      chooseVarDataMany: [], //多选择选中
      openBeforeMany: [] //打开选择框之前选中的值
    };
  },
  mounted() {
    this.onListData();
  },
  methods: {
    //列表数据
    onListData() {
      let params = {
        page: 1, //当前页
        page_size: 1, //每页显示数据条数
        order_no: this.$route.query.code
      };
      getOrderList(params).then(res => {
        this.listData = res.data.list;
        this.device_name = res.data.list[0].device_name;
        this.device_number = res.data.list[0].device_number;
        this.order_no = res.data.list[0].order_no;
      });
    },
    //确定
    onSumbit() {
      if (this.chooseVarData.length === 0) {
        this.engineerNameError = '请选择工程师';
        return;
      }
      let params = {};
      params.id = this.listData[0].id;
      params.engineer_user_id = this.chooseVarData[0].id;
      params.engineer_user_name = this.chooseVarData[0].name;
      params.cc_user_list = [];
      if (this.chooseVarDataMany.length) {
        this.chooseVarDataMany.map(item => {
          params.cc_user_list.push({ id: item.id, name: item.username });
        });
      }
      params.cc_user_list = JSON.stringify(params.cc_user_list);
      dispatchOrder(params).then(res => {
        Toast('指派成功');
        this.$router.go(-1);
      });
    },
    //选择工程师
    //工程师数据
    onEngineerList() {
      getEngineerList().then(res => {
        this.varList = res.data;
        this.varList.map(item => {
          item.checked = false;
        });
        //回显勾选
        if (this.chooseVarData.length) {
          this.chooseVarData.map(item => {
            this.varList.map(subItem => {
              if (subItem.id === item.id) {
                subItem.checked = true;
              }
            });
          });
        }
        this.filterVarList = this.varList;
      });
    },
    //打开
    onOpenVar() {
      this.showVarBox = true;
      this.openBefore = JSON.parse(JSON.stringify(this.chooseVarData));
      this.onEngineerList();
    },
    // 搜索变量
    handleSearch() {
      let filterArr = this.varList.filter(item => {
        return item.name.indexOf(this.searchKey) !== -1;
      });
      this.filterVarList = filterArr;
    },
    // 清空搜索
    handleClear() {
      this.filterVarList = this.varList;
    },
    // 选择变量
    selectVar(item, index) {
      this.chooseVarData = [];
      if (!item.checked) {
        this.filterVarList.map((fitem, findex) => {
          if (index === findex) {
            fitem.checked = true;
          } else {
            fitem.checked = false;
          }
        });
        this.$forceUpdate();
        this.chooseVarData.push(item);
      } else {
        item.checked = false;
        this.$forceUpdate();
      }
    },
    // 取消变量选择
    cancelSelect() {
      this.showVarBox = false;
      this.chooseVarData = this.openBefore;
    },
    // 确定变量选择
    confirmSelect() {
      if (this.chooseVarData.length === 0) {
        this.showVarBox = false;
        this.engineerName = '';
        this.$forceUpdate();
        return;
      } else {
        this.engineerName = this.chooseVarData[0].name;
      }
      this.showVarBox = false;
    },

    //选择抄送人员
    //抄送人员数据
    onSystemUserList() {
      getSystemUserList().then(res => {
        this.varListMany = res.data.list;
        this.varListMany.map(item => {
          item.checked = false;
        });
        //回显勾选
        if (this.chooseVarDataMany.length) {
          this.chooseVarDataMany.map(item => {
            this.varListMany.map(subItem => {
              if (subItem.id === item.id) {
                subItem.checked = true;
              }
            });
          });
        }
        this.filterVarListMany = this.varListMany;
      });
    },
    //打开
    onOpenVarMany() {
      this.showVarBoxMany = true;
      this.openBeforeMany = JSON.parse(JSON.stringify(this.chooseVarDataMany));
      this.onSystemUserList();
    },
    // 搜索变量
    handleSearchMany() {
      let filterArrMany = this.varListMany.filter(item => {
        return item.username.indexOf(this.searchKeyMany) !== -1;
      });
      this.filterVarListMany = filterArrMany;
    },
    // 清空搜索
    handleClearMany() {
      this.filterVarListMany = this.varListMany;
    },
    // 删除所选抄送人员
    deleteVarDataMany(index) {
      this.chooseVarDataMany.splice(index, 1);
    },
    // 选择变量
    selectVarMany(item, index) {
      item.checked = !item.checked;
      this.$forceUpdate();
      if (item.checked) {
        this.chooseVarDataMany.push(item);
      } else {
        this.chooseVarDataMany.map((chooseItem, index) => {
          if (item.id === chooseItem.id) {
            this.chooseVarDataMany.splice(index, 1);
          }
        });
      }
    },
    // 取消变量选择
    cancelSelectMany() {
      this.showVarBoxMany = false;
      this.chooseVarDataMany = this.openBeforeMany;
    },
    // 确定变量选择
    confirmSelectMany() {
      if (this.chooseVarDataMany.length === 0) {
        this.showVarBoxMany = false;
        this.$forceUpdate();
        return;
      }
      this.showVarBoxMany = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.assign-container {
  background-color: #fff;
  width: 100%;
  height: 100%;
  // overflow-y: auto;
  // -webkit-overflow-scrolling: touch;
  padding-bottom: 1.866667rem;
  display: flex;
  flex-direction: column;
}
.app-form-red {
  color: #f56c6c;
  font-size: 0.32rem;
}
.add-name-box {
  margin-left: 0.426667rem;
}
.add-name-text {
  color: #666666;
  font-size: 0.32rem;
}

::v-deep .van-field__value {
  border-bottom: 1px solid #f2f6fc;
}

.assign-name-box {
  padding: 0.426667rem;
  .name-text {
    font-size: 0.426667rem;
    color: #333333;
  }
  .id-text-box {
    display: flex;
    font-size: 0.32rem;
    color: #999999;
    margin: 0.266667rem 0;
  }
  .decive-code {
    position: relative;
    padding-right: 0.213333rem;
    margin-right: 0.213333rem;
  }
  .decive-code::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 0.32rem;
    background-color: #999999;
  }
  .border-box {
    width: 100%;
    border-bottom: 1px solid #f2f6fc;
  }
}
.var-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.96rem;
  font-size: 0.373333rem;
  padding-right: 0.426667rem;
  .van-icon {
    color: #85aeff;
  }
}

//按钮
.button-margin {
  margin: 0.426667rem;
  position: fixed;
  width: 91%;
  bottom: 0.053333rem;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}

//选择器
.van-popup--bottom {
  border-top-left-radius: 0.426667rem;
  border-top-right-radius: 0.426667rem;

  .var-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .var-box-header {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.213333rem;
      padding: 0 0.426667rem;
      padding-top: 0.426667rem;

      .model-name {
        margin-right: 0.266667rem;
        font-size: 0.426667rem;
        line-height: 0.533333rem;
      }

      .model-choose {
        flex-shrink: 0;
        color: var(--color-deep-gary);
        font-size: 0.32rem;
      }
    }

    .var-search-box {
      flex-shrink: 0;
      margin-bottom: 0.213333rem;
      border-bottom: 1px solid var(--border-color);
    }

    .var-list {
      flex: 1;
      width: 100%;
      padding: 0 0.426667rem;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.32rem 0;
        font-size: 0.373333rem;
        border-bottom: 1px solid var(--border-color);

        &:last-of-type {
          border-bottom: 0;
        }
      }
    }

    .operate-box {
      flex-shrink: 0;
      display: flex;
      width: 100%;
      height: 1.28rem;
      border-top: 1px solid var(--border-color);

      li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        font-size: 0.426667rem;

        &:first-of-type {
          &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            background-color: var(--border-color);
          }
        }
      }
    }
  }
}
</style>